<template>
  <div>
    <div class="back"></div>
    <img :sdc="logoUrl" alt="防灾科技学院软件研发中心logo" class="logo">
    <i-button class="join" type="primary">
      <Icon type="md-add"/>加入我们
    </i-button>
    <!-- <p>分享到</p> -->
    <Header :style="{position: 'fixed', width: '100%'}">
      <Menu mode="horizontal" theme="dark" active-name="1">
        <div class="layout-logo"></div>
        <div class="layout-nav">
          <MenuItem name="1">
            <Icon type="ios-navigate"></Icon>Item 1
          </MenuItem>
          <MenuItem name="2">
            <Icon type="ios-keypad"></Icon>Item 2
          </MenuItem>
          <MenuItem name="3">
            <Icon type="ios-analytics"></Icon>Item 3
          </MenuItem>
          <MenuItem name="4">
            <Icon type="ios-paper"></Icon>Item 4
          </MenuItem>
        </div>
      </Menu>
    </Header>
  </div>
</template>

<script>
import logo from "@/assets/public/image/logo.png";

export default {
  name: "Head",
  data() {
    return {
      logoUrl: logo
    };
  }
};
</script>


<style scoped>
.back {
  background-color: #f8f8f9;
  width: 100%;
  height: 200px;
}
.logo {
  position: absolute;
  top: 20px;
}
.join {
  display: block;
  position: absolute;
  top: 100px;
  right: 100px;
}
</style>
